<template>
  <a-layout id="components-layout-demo-responsive">
    <!-- <daohang></daohang> -->
    <a-layout>
      <a-layout-header :style="{ background: '#fff', padding: 0 }" />
      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">

          <table border="1px" width="500px">
            <tr>
              <th>用户名</th>
              <th>手机号</th>
              <th>邮箱</th>
              <th>删除用户</th>
              <th>修改用户信息</th>
            </tr>
            <tr  v-for="user in user_li" :key="user.id">
              <td>{{user.username}}</td>
              <td>{{user.phone}}</td>
              <td>{{user.email}}</td>
              <td>
                <a-button @click="user_del(user.id)">
                  <a-icon type="user-delete" />
                </a-button>


              </td>
              <td>
                <a-button type="primary" @click="ShowModal(user.id)">
                  <a-icon type="user-add" />
                </a-button>
                <a-modal v-model="Visible" title="修改用户信息" @ok="HandleOk" >
                  <p>密码 &nbsp;&nbsp;&nbsp;<input type="text" v-model="password2"  placeholder="可以不填呦"> </p>
                  <p>手机号 <input type="text" v-model="phone2"  placeholder="可以不填呦"> </p>
                  <p>邮箱 &nbsp;&nbsp;&nbsp;<input type="text" v-model="email2"  placeholder="可以不填呦"> </p>
                </a-modal>
              </td>
            </tr>
          </table>

          <a-button type="primary" @click="showModal">
            添加用户<a-icon type="user-add" />
          </a-button>
          <a-modal v-model="visible" title="添加用户" @ok="handleOk" >
            <p>用户名 <input type="text" v-model="username"> </p>
            <p>密码 &nbsp;&nbsp;&nbsp;<input type="text" v-model="password"> </p>
            <p>手机号 <input type="text" v-model="phone"> </p>
            <p>邮箱 &nbsp;&nbsp;&nbsp;<input type="text" v-model="email"> </p>
          </a-modal>

        </div>
      </a-layout-content>
      <a-layout-footer style="textAlign: center">
        Ant Design ©2018 Created by Ant UED

      </a-layout-footer>
    </a-layout>

  </a-layout>





</template>
<script>

  export default {
    data(){
      return{
        visible: false,
        Visible: false,
        user_li:'',
        username:"",
        email:'',
        phone:"",
        password:'',
        username2:'',
        email2:'',
        phone2:"",
        password2:'',

      }
    },
    methods: {
      onCollapse(collapsed, type) {
        console.log(collapsed, type);
      },
      onBreakpoint(broken) {
        console.log(broken);
      },
      showModal() {
        this.visible = true;

      },
      handleOk(e) {
        console.log(e);
        this.visible = false;
        console.log(this.username)
        // let f = new FormData()
        this.$axios.post('http://127.0.0.1:8000/user/',{'username':this.username,'password':this.password,'phone':this.phone,'email':this.email})
          .then(res=>{
            console.log(res.data)
            location.reload()
          })
      },
      user_get(){
        this.$axios.get('http://127.0.0.1:8000/user/')
        .then(res=>{
          console.log(res.data)
          this.user_li = res.data
        })
      },
      user_del(uid){
        this.$axios.delete('http://127.0.0.1:8000/user/?uid='+uid, )
          .then(res=>{
            console.log(res.data)
          })
        location.reload()

        },
      ShowModal(id) {
        this.Visible = true;
        this.$axios.get('http://127.0.0.1:8000/showuser/?id='+id)
          .then(res=>{
              console.log(res.data)
             this.username2 = res.data.username
             this.phone2 = res.data.phone
             this.password2 = res.data.password
             this.email2 = res.data.email
          })
      },
      HandleOk(e,id) {
        console.log(e);
        this.Visible = false;

        this.$axios.put('http://127.0.0.1:8000/user/',{'username':this.username2,'password':this.password2,'phone':this.phone2,'email':this.email2})
          .then(res=>{
            console.log(res.data)
            if(res.data.code===200){
              alert('修改成功')
            }
            location.reload()
          })
      },

    },
    created() {
      this.user_get()
    }
  };
</script>

<style>
  #components-layout-demo-responsive .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
</style>
